<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>真人CS地图</title>
	<link rel="stylesheet" href="css/style.css" />

	<link href="css/user.css" rel="stylesheet" />
	<!--<link rel="stylesheet" href="css/elm.css"> -->
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
	<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/message.css" rel="stylesheet" />
	
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="https://fastly.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.min.js"></script>
	<script src="js/system/mui.min.js"></script>

	<script>
		mui.init();
	</script>
</head>

<body>
<!-- 滚动字幕,位置放的太下加命值和弹量的按钮右影响 -->

	<div style="position: fixed; left: 10000px; width: 100%; height: 100%; background-color: #262626; z-index: 9999;overflow: auto"
		id="playerUIApp">
		<table class="table table-dark">

			<thead>

				<tr>
					<th scope="col" colspan="4" 
					style="align-content: center;line-height: 50px; vertical-align: middle;">我的队友</th>
					<th scope="col"><button class="close" style="position: relative;left: 290px;"
							 @click="ClosePlayInfoWindow"></button></th>
				</tr>
			</thead>

			<thead>

				<tr>
					<th scope="col">编号</th>
					<th scope="col">姓名</th>
					<th scope="col">弹量</th>
					<th scope="col">生命值</th>
					<th scope="col">金币值</th>
					<th scope="col">增加弹量</th>
					<th scope="col">增加命值</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item,index) in playerScoreList">
					<th scope="row" style="width: 8%">{{index+1}}</th>
					<td style="width: 10%">
						{{item.userName}}
					</td>
					<td style="width: 15%">
						<div class="progress mb-2" style="height: 20px;">
							<div class="progress-bar bg-success " :style="{width:item.bulletCount+'%'}">
								{{item.bulletCount}}/100</div>
						</div>
					</td>
					<td style="width: 15%">
						<div class="progress mb-2" style="height: 20px;">
							<div class="progress-bar bg-warning " :style="{width:item.lifeValue+'%'}">
								{{item.lifeValue}}/100</div>
						</div>
					</td>
					<td style="width: 14%">
						<div class="progress mb-2" style="height: 20px;">
							<div class="progress-bar bg-warning " :style="{width:item.goldCoin+'%'}">
								{{item.goldCoin}}/100</div>
						</div>
					</td>
					
					<td style="width: 19%" v-if="!(item.userId==this.userId)">
						<div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='50'>
						  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
						  <input class="mui-numbox-input inputNumberStyle" type="number" ref="input2"/>
						  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
						</div>
						
						<button type="button" class="mui-btn mui-btn-success mui-btn-outlined" 
						@click="AddBulletCount(index,item.userId)" style="margin-top: 10px;">加弹量</button>
					</td>
					<td style="width: 19%" v-if="!(item.userId==this.userId)">
						<div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='50'>
						  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
						  <input class="mui-numbox-input inputNumberStyle" type="number" ref="input1"/>
						  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
						</div>
						<button type="button" class="mui-btn mui-btn-success mui-btn-outlined" 
						@click="AddPlayerLife(index,item.userId)" style="margin-top: 10px;">加命值</button>
					</td>

				</tr>

			</tbody>
		</table>
	</div>


	<!--管理界面 -->
	<div id="managerUIApp" style="position: fixed; left: -10px; top: -10px; width: 100%;z-index: 9999;"  >
		<div class="mui-card" style="width: 100%; height: 100%;" v-if="ShowManagerUI">
			<div style="text-align:center;  line-height: 50px; vertical-align: middle; 
			background-color: rgb(52, 58, 64);">
				<p1 style="color: #ffffff;">战队队友列表</p1>
				
			</div>
			<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell mui-collapse" v-for="item in list" 
				style="background-color: rgb(99, 99, 148);">
					<a class="mui-navigate-right" style="color: #ffffff;">{{item.name}}<span
							class="mui-badge mui-badge-primary">{{item.child.length}}</span></a>
					<ul class="mui-table-view mui-table-view-chevron" v-for="(subitem,index_) in item.child">
						<li class="mui-table-view-cell" style="background-color: #009688;">
							<div class="mui-navigate-right">
								<span style="margin-right: 24px;color: #ffffff;">{{subitem.name}}</span>
								<a href="#" @click="ShowDetailInfo(subitem.id)">详细查看</a>
							</div>

						</li>

					</ul>
				</li>

			</ul>
			<button @click="closeUIManager()" style="position:fixed;top: 10px;right: -60px;"
					class="close"></button>
		</div>
		
		
		<div style="position: fixed; top: 5px; width: 100%;right: 0px; height: 800px;
		 background-color: #535353; z-index: 9999;overflow:auto;"
			v-if="isShowDetailInfo">

			<table class="table table-dark">
				<thead>
					<tr >
						<th scope="col" style="align-content: center;line-height: 50px; vertical-align: middle;">游戏战绩显示</th>
						<th scope="col">
							<div  align='right'>
							<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined"  @click="RefreshShowDetailInfo">刷新数据</button>
							<label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
						    <button class="close"  @click="closeDetailInfoUI"></button>
							
							</div>
						</th>

					</tr>
				</thead>
				<tbody>
					<tr>
						<td>姓名</td>
						<td>{{UserDetailInfo.userName}}</td>

					</tr>
					<tr>
						<td>弹量</td>
						<td>
							<div class="progress mb-2" style="height: 20px;">
								<div class="progress-bar bg-success"
									:style="{width: UserDetailInfo.bulletCount + '%'}">
									{{UserDetailInfo.bulletCount}}/100</div>
							</div>
						</td>

					</tr>
					<tr>
						<td>生命值</td>
						<td>
							<div class="progress mb-2" style="height: 20px;">
								<div class="progress-bar bg-warning" :style="{width: UserDetailInfo.lifeValue + '%'}">
									{{UserDetailInfo.lifeValue}}/100</div>
							</div>
						</td>

					</tr>

					<tr>
						<td>战绩</td>
						<td>

							<div class="progress mb-2" style="height: 20px;">
								<div class="progress-bar bg-danger " :style="{width: UserDetailInfo.fightScore + '%'}">
									{{UserDetailInfo.fightScore}}/100</div>
							</div>
						</td>

					</tr>
					
					<tr>
						<td>金币</td>
						<td>
					
							<div class="progress mb-2" style="height: 20px;">
								<div class="progress-bar bg-danger " :style="{width: UserDetailInfo.goldCoin + '%'}">
									{{UserDetailInfo.goldCoin}}/100</div>
							</div>
						</td>
					
					</tr>
					<!--
					<tr style="text-align: center;">
						<td colspan="2"><button class="close"
								style="transform:scale(0.90)" @click="closeDetailInfoUI">关闭窗口</button></td>

					</tr>
					-->
				</tbody>
			</table>

		</div>
	</div>

	<div id="container"></div>
	<div class="div2">
		<marquee   loop="−1"  scrollamount="2"
		 style="border-radius:5px;valign :middle ;background-color: rgba(0, 170, 0, 0.9);"
		behavior="scroll" scrollamount ="5" width="200px" height="20px"><font size="2" color="#ffffff" id="font1">真人CS吃鸡游戏进行中</font>
		</marquee>
		
	</div>
	<button id="exitButton" type="button" class="mui-btn mui-btn-warning" 
		style="width: 80px;font-size: 10px;position: fixed;top:5px;left: 5px;background-color: #FF5722;" onclick="Back()">返回上页</button>
		
	<button id="setFitView" type="button" class="mui-btn mui-btn-primary"
		style="width: 80px;font-size: 10px;position: fixed;top:40px;left: 5px;background-color: #01AAED;">围栏定位</button>
	
		<button id="switchMap" type="button" class="mui-btn mui-btn-primary"
			style="width: 80px;font-size: 10px;position: fixed;top:75px;left: 5px;background-color: #01AAED;" onclick="SwichMap()">卫星地图</button>
			
			<button id="playerShowC" type="button" class="mui-btn mui-btn-primary"
				style="width: 80px;font-size: 10px;position: fixed;top:110px;left: 5px;background-color: #01AAED;" onclick="SetPlayerShow(this)">队友显示</button>
				
				<button id="admin_playerShowC" type="button" class="mui-btn mui-btn-primary"
					style="width: 80px;font-size: 10px;position: fixed;top:110px;left: 5px;background-color: #01AAED;" onclick="Admin_SetPlayerNameShow(this)">队友名称</button>

	<div id="app">
		<button type="button" 
		class="btn icon-b mr-10" :class="cut?'btn-primary':'btn-warning'" 
		@click="isShow" style="position:fixed;left: -2px;bottom: 0px; transform:scale(0.80);background-color: #FF5722">{{cut?'关闭通讯':'战队通讯'}}</button>
		<button type="button" class="btn icon-b" :class="'btn-primary'"
			style="position:fixed;left: 75px;;bottom: 0px;transform:scale(0.80);background-color: #01AAED;" @click="OpenManagerPlayer"
			v-bind:disabled="dis">{{buttonName}}</button>
		<div class="msg" style="position:fixed;top: 5px;">
			<div class="progress mb-2">
				<div class="progress-bar bg-success " :style="{width: '100%'}">{{timeShow}}</div>
			</div>

			<div class="progress mb-2">
				<div class="progress-bar bg-success " :style="{width: '100%'}">{{currentUser}}</div>
			</div>
			<div class="progress mb-2" v-show="!showlife">
					<div class="progress-bar bg-success " :style="{width: '100%'}">{{onLineCount}}</div>
			</div>

			<div class="progress mb-2" v-show="showlife">
				<div class="progress-bar bg-success " :style="{width: '100%'}">{{goldCoinName}}</div>
			</div>


			<div class="progress mb-2" style="background-color: #bcbcbc;" v-show="showlife">
				<div class="progress-bar bg-success " :style="{width: msg.bulletValue + '%'}">{{msg.bulletName}}</div>
			</div>
			<div class="progress mb-2" style="background-color: #bcbcbc;"  v-show="showlife">
				<div class="progress-bar bg-warning " :style="{width: msg.scoreValue + '%'}">{{msg.scoreName}}</div>
			</div>

			<div class="progress mb-2" style="background-color: #bcbcbc;" v-show="showlife">
				<div class="progress-bar bg-danger " :style="{width: msg.lifeValue + '%'}">{{msg.lifeName}}</div>
			</div>
			
			<div class="progress mb-2" style="background-color: #bcbcbc;" v-show="showlife && !blueToothState">
				<div class="progress-bar bg-danger " id = "bluetoothStateNoConnect" style="width: 100%">设备状态：未连接</div>
			</div>
			<div class="progress mb-2" style="background-color: #bcbcbc;" v-show="showlife && blueToothState">
				<div class="progress-bar bg-success " id = "bluetoothStateconnectSuccess" style="width: 100%">设备状态：连接成功</div>
			</div>
			
		</div>
		<transition name="slide-fade">
			<div class="container" v-if="cut">

				<div class="card p-1" style="width: 350px;left:-30px;  height: 220px; background-color: rgba(22, 44, 67, 0.8);">

					<div class=" card-body">
						<h5 v-for="(item,index) in list" :key="index" style="color:greenyellow">
							{{item.name}}
						</h5>
					</div>
					<div class="input-group mb-0 w-76" style="width: 100%;    ">
						<input type="text" class="form-control " placeholder="输入内容" v-model="inputContent"
							maxlength="10">
						<button type="submit" style="transform:scale(0.80);background-color: #01AAED;" class="btn btn-primary ml-0"
							@click="send">发送</button>
						
						<button class="btn btn-primary ml-0 "   @click="FastChange"
							style="transform:scale(0.80);background-color: #01AAED;">快捷</button>
					</div>
				</div>
			</div>
		</transition>

		<transition name="slide-fade1">
			<div class="container" v-if="showFastMessageWindow" style="width: 350px;height: 230px;
				background-color: rgba(57,61,73, 0.9);position: fixed;bottom: 90px; left: 6px;">

				<div>
					<div class="mui-row" style="width: 100%;">
						<div style="text-align:center; line-height: 50px; vertical-align: middle; ">
							<p1 style="color: #FF5722; font-family:Microsoft YaHei" >快捷通讯用语</p1>
							
						</div>
						<hr></hr>
						<div class="mui-col-xs-4 mui-col-xs-12" style="padding-bottom: 10px;"
							v-for="item in fastMessagecontent">
							<button type="button" class="mui-btn  mui-btn-warning mui-btn-outlined"
								@click="SelectMessage(item)">
								{{item}} </button>

						</div>
						<button class="close2"
							style=" position: relative; top: -205px;right: -295px;"
							@click="CloseMessageWindow"></button>
					</div>
				</div>

			</div>

		</transition>
	</div>
	<div id="messageUIApp"  style="width: 100%;height: 100%;">
		
		<div class="messageParentDiv"   id="messagediv">
			<div class="contentBackGround" v-for="item in tipsArray"><p class="tipsContent" v-html="item"></p></div>
		</div>
	</div>
  <script type="text/javascript"  src="js/system/jquery.min.js"></script>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=fb6c5f60fce4e3dd715a9716e7740e39"></script>
	<script type="text/jscript" src="js/common.js"></script>
	<script type="text/javascript"  src="js/fence/fence_knapsack.js"></script>
	<script type="text/javascript" src="js/map/User.js"></script>
	<script type="text/javascript" src="js/map/UpdateKnapsack.js"></script>
	<script type="text/javascript" src="js/map/AdminManager.js"></script>
	<script type="text/javascript" src="js/map/GameStateCheck.js"></script>
	<script type="text/javascript" src="js/map/RemianTime.js"></script>
	<script type="text/javascript" src="js/map/MyPlayerList.js"></script>
	<script type="text/javascript" src="js/map/MessageTips.js"></script>
	<script type="text/javascript" src="js/map/PlayerMarker.js"></script>
	<script type="text/javascript" src="js/map/map.js"></script>

</body>

</html>